<template>
<div class="local-box">
    <div class="timeline">
        <el-timeline>
            <el-timeline-item timestamp="步骤1" placement="top">
            <el-card class="card" shadow="hover">
                <h4>下载指定格式的模板</h4>
                <el-button @click="getFile" type="primary">点我下载</el-button>
            </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="步骤2" placement="top">
            <el-card class="card" shadow="hover">
                <h4>利用WPS，Excel等文本编辑工具填写参数</h4>
            </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="步骤3" placement="top">
            <el-card class="card" shadow="hover">
                <h4>上传填写好的模板</h4>
                <!-- <el-button @chilk="uploadFile" type="danger">上传文件</el-button> -->
                <el-upload
                class="upload-demo"
                drag
                action="http://c7.cabc.top:8222/api/v1.0/jwt/uploadfile/"
                :on-success="success"
                :on-error="error"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
            </el-card >
            </el-timeline-item>
        </el-timeline>
    </div>
    <el-divider></el-divider>
    <div class="tips">
        <h2>提示：</h2>
        <p>1.除所需要填写的部分之外，请问修改模版其它地方的内容，以免数据审核不通过</p>
    </div>

</div>
</template>
<script>
import Axios from 'axios';
import {fileDownLoad} from "@/utils/fileDownLoad"
export default{
    data(){
        return{

        }
    },
    mounted(){
    },
    methods:{
        getFile(){
            Axios({
            method:'get',
            url:'http://c7.cabc.top:8222/api/v1.0/jwt/download/excel/?filename=template.xlsx',
            responseType: 'blob',
            })
            .then(res => {
                console.log(res);
                if (res.data) {
                    fileDownLoad(res.data, '模版.xlsx')
                }
                this.$message.success('下载成功！')
            }).catch( err => {
                console.log(err);
            })
        },      
        uploadFile(){
            Axios({
                url: 'http://c7.cabc.top:8222/api/v1.0/jwt/uploadfile/',
                method: 'post',
                data: parameter,
                headers: {
                'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                console.log(res);
            }).catch((err) => {
                console.log(err);
            });
        },
        success(res){
            console.log(res);
            this.$message.success('上传成功！')
        },
        error(err){
            console.log(err);
            this.$message.error('上传失败！')
        }

    }
}
</script>
<style scoped>
.local-box{
    width: 90;
    margin: 50px auto;
}
.tips{
    margin: 0 50px;
}
.card{
    width: 70%;
}
</style>
    